<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <!-- 组件之间数据相互独立 -->
        <button-count></button-count>
        <button-count></button-count>
        <button-count></button-count>
        <button-count></button-count>
        <!-- 局部组件 -->
        <hello-a></hello-a>
        <hello-b></hello-b>
    </div>
</body>

<script src="../vue.js"></script>
<script>
    // 自定义组件：组件名称  驼峰要转-  普通 - -
    Vue.component('button-count', {
            // 组件数据，必须是一个函数(使用函数会形成一个闭包，
            // 这样保证每个组件都是一个独立的作用域，不会相互影响)
            data: function() {
                return {
                    count: 0
                }
            },
            // 组件模板：内容必须是单个的元素;组件模板内容可以是模板字符串(es6)
            // template: '<div><button @click="handler"> 点击了{{count}}次</button></div>',
            template: `<div>
            <button @click="handler"> 点击了{{count}}次</button>
            <button @click="handler"> 点击了{{count}}次</button>
            </div>`,
            // 组件方法
            methods: {
                handler: function() {
                    this.count += 2
                }
            },
        })
        // 局部组件，只能在注册他的父组件中使用
    var hellob = {
        data: function() {
            return {
                ms: 'hollob'
            }
        },
        template: '<div>{{ms}}</div>'
    }

    var helloa = {
        data: function() {
            return {
                msg: '大集合'
            }
        },
        template: '<div>{{msg}}</div>'
    }
    var vm = new Vue({
        el: '#app',
        data: {},
        methods: {

        },
        // 局部组件
        components: {
            'hello-a': helloa,
            'hello-b': hellob,

        }
    })
</script>

</html>